<template>
	<view class="applyfor">
		<view class="detailBox">
			<image :src="pageData.products_image" style="width: 160rpx;height: 160rpx;border-radius: 10rpx;" mode="">
			</image>
			<view class="message">
				<view class="name">
					{{pageData.products_name}}
				</view>
				<view class="desc">
					规格：{{pageData.sku_text}}
				</view>
				<view class="bottom">
					<view class="price">
						₱{{pageData.price}}
					</view>
					<view class="number">
						x{{pageData.num}}
					</view>
				</view>
			</view>
		</view>

		<view class="applyforBox">
			<view class="titleBox">
				请选择售后类型
			</view>
			<view class="typeBox">
				<view class="typeitem" :class="currIndex==0 ? 'typeitemed' :''" @click="handleType(0)">
					仅退款
				</view>
				<view class="typeitem" :class="currIndex==1 ? 'typeitemed' :''" @click="handleType(1)">
					退款退货
				</view>
				<view class="typeitem" :class="currIndex==2 ? 'typeitemed' :''" @click="handleType(2)">
					换货
				</view>
			</view>
			<view class="titleBox" style="margin-top: 30rpx;">
				售后原因
			</view>
			<view class="reason">
				<textarea class="content" v-model="content" name="" id="" placeholder="请输入售后原因"></textarea>
			</view>
			<view class="heng"></view>

			<view class="titleBox" style="margin-top: 30rpx;">
				上传售后凭证
			</view>

			<view class="imgBox">
				<view class="MT_30" style="display: flex;">
					<view class="" v-for="(item,index) in portrait" :key="index" style="position: relative;">
						<image :src="item" mode="aspectFit"
							style="width: 160rpx;height: 160rpx;margin-right: 20rpx;display: flex;margin-right: 30rpx;">
						</image>
						<view class="" style="position: absolute;top: 10rpx; left: 155rpx;color: red;width: 100rpx;"
							@click="shanchuImg(index,1)"><u-icon name="close" color="red"></u-icon>
						</view>
					</view>

					<image v-if="portrait.length==3?false:true" src="../../static/image/upload.png"
						style="width: 160rpx;height: 160rpx;" mode="" @click="modufyimage"></image>
				</view>
			</view>

		</view>


		<view class="submitBtn" @click="handleSubmit">
			提交申请
		</view>

	</view>
</template>

<script>
	import {
		backsales,
		uploadImg
	} from "@/api/api.js"
	export default {
		data() {
			return {
				currIndex: 0,
				portrait: [],
				content: "",
				pageData: {},
				order_type: "仅退款", //售后类型

			}
		},
		onLoad(options) {
			console.log("eee", JSON.parse(options.data))
			this.pageData = JSON.parse(options.data)
		},
		methods: {
			handleType(index) {
				this.currIndex = index
				if (index == 0) {
					this.order_type = '仅退款'
				}
				if (index == 1) {
					this.order_type = '退款退货'
				}
				if (index == 2) {
					this.order_type = '换货'
				}
			},
			// 获取用户相册
			modufyimage(e) {
				const that = this
				uni.chooseImage({
					count: 3, // 最多可以选择的图片张数，默认9/这里可以限制照片数量
					sizeType: ['original', 'compressed'], //original 原图，compressed 压缩图，默认二者都有
					sourceType: ['album', 'camera'], //album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
					success: function(res) {
						uni.showToast({
							title: '上传中..',
							icon: "loading",
							duration: 2000
						});
						console.log(res)
						for (let i = 0; i < res.tempFilePaths.length; i++) {
							// const len = that.imageList.length
							uni.uploadFile({
								url: uploadImg, //仅为示例，非真实的接口地址
								filePath: res.tempFilePaths[i],
								name: 'file', //这里注意修改成后端需要的字段
								formData: {},
								// header: {
								// 	"Content-Type": "application/form-data",
								// 	"Authorization": 'Bearer' + ' ' + that.token
								// },
								success: (uploadFileRes) => {
									let a = JSON.parse(uploadFileRes.data)
									that.portrait.push(a.data)
									uni.showToast({
										title: '上传成功！',
										icon: "none",
										duration: 1000
									});
								},
								fail: (e) => {
									console.log("网络请求fail");
								},
							});
						}
					}
				})
			},

			// 删除图片
			shanchuImg(e, i) {
				if (i == 1) {
					this.portrait.splice(e, 1);
				}
			},

			async handleSubmit() {
				if (this.content == '') {
					uni.showToast({
						title: '请输入退款原因！',
						icon: "none",
						duration: 2000
					});
					return
				}
				let data = {
					order_type: this.order_type,
					back_remark: this.content,
					back_imgs: this.portrait.join(','),
					id: this.pageData.id
				}

				let res = await backsales(data)
				if (res.code == 1000) {
					uni.showToast({
						title: res.message,
						icon: "none",
						duration: 2000
					});
					setTimeout(() => {
						// uni.reLaunch({
						// 	url: "./afterSaleList"
						// })
						uni.navigateBack({delta:2})
					}, 2000)
				} else {
					uni.showToast({
						title: res.message,
						icon: "none",
						duration: 2000
					});
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.submitBtn {
		width: 670rpx;
		height: 80rpx;
		background: #439B05;
		font-size: 32rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 80rpx;
		text-align: center;
		border-radius: 100rpx;
		position: absolute;
		bottom: 100rpx;
		left: 40rpx;
	}

	.detailBox {
		display: flex;
		margin-top: 1rpx;
		width: 100%;
		padding: 30rpx;
		box-sizing: border-box;
		background-color: #ffffff;

		.message {
			flex: 1;
			margin-left: 20rpx;

			.name {
				width: 100%;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #333333;
				line-height: 38rpx;
			}

			.desc {
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #999999;
				line-height: 28rpx;
				margin-top: 20rpx;
			}

			.bottom {
				display: flex;
				width: 100%;
				justify-content: space-between;
				margin-top: 34rpx;

				.price {
					font-size: 32rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 38rpx;
				}

				.number {
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #999999;
					line-height: 33rpx;
				}
			}
		}
	}

	.applyforBox {
		width: 100%;
		// height: 632rpx;
		background: #FFFFFF;
		margin-top: 20rpx;
		padding: 30rpx;
		box-sizing: border-box;

		.titleBox {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #333333;
			line-height: 33rpx;
		}

		.typeBox {
			display: flex;
			justify-content: space-between;
			margin-top: 30rpx;

			.typeitem {
				width: 220rpx;
				height: 72rpx;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				opacity: 1;
				border: 2rpx solid #CCCCCC;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 72rpx;
				text-align: center;
			}

			.typeitemed {
				background: #FEEBE9;
				border: 2rpx solid #FF3D3D;
				color: #FF3D3D;

			}
		}

		.reason {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #999999;
			line-height: 33rpx;
			justify-content: space-between;
			margin-top: 30rpx;

			.content {
				width: 650rpx;
				height: 120rpx;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #999999;
				line-height: 33rpx;
				margin-bottom: 20rpx;
			}
		}

		.heng {
			width: 690rpx;
			height: 2rpx;
			background-color: #F5F5F5;
			margin-top: 30rpx;
		}

		.imgBox {
			margin-top: 30rpx;
		}
	}
</style>